<template>
  <div class="content">
    <AnonymousSlot>
      <!-- 匿名插槽 2 在父组件中调用 并使用v-slot指令  -->
      <!-- <template v-slot>
        <div>
          {{ obj.title }}
        </div>
      </template> -->

      <!-- 具名插槽 -->
      <template v-slot:header>
        <div>具名插槽 header</div>
      </template>

      <template #footer>
        <div>具名插槽 footer</div>
      </template>

      <!-- 匿名作用域插槽 -->
      <template #default="{ data, index }">
        <div>{{ data.name }} ---- {{ data.age }} ---- {{ index }}</div>
      </template>

      <!-- 具名作用域插槽 -->
      <template #section="{ data, index }">
        <div>{{ data.name }} ---- {{ data.age }} ---- {{ index }}</div>
      </template>

      <!-- 动态插槽插槽 -->
      <template #[name]>
        <div>动态插槽</div>
      </template>
    </AnonymousSlot>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import AnonymousSlot from "./slot.vue";
const obj = reactive({
  title: "被插入了",
});
let name = ref("footer");
const change = () => {
  name.value = name.value == "footer" ? "header" : "footer";
};
</script>

<style lang="less" scoped></style>
